<template>
  <div class="body">
    <div class="login-box">
      <h1>管理员登录</h1>
      <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
      >
        <a-form-item>
          <a-input
            v-decorator="[
              'userName',
              {
                rules: [{ required: true, message: '请输入用户名' }],
              },
            ]"
            placeholder="用户名"
          >
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              {
                rules: [{ required: true, message: '请输入密码' }],
              },
            ]"
            type="password"
            placeholder="密码"
          >
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-checkbox
            v-decorator="[
              'remember',
              {
                valuePropName: 'checked',
                initialValue: true,
              },
            ]"
          >
            记住我
          </a-checkbox>
          <a class="login-form-forgot" href=""> 忘记密码 </a>
          <a-button type="primary" html-type="submit" class="login-form-button">
            登录
          </a-button>
          Or
          <a href=""> 注册 </a>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { Login, UploadCookie } from "../../network/login";
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  created() {
    this.uploadCookies();
  },
  methods: {
    uploadCookies() {
      if (Cookies.get("token") != undefined) {
        // console.log(id, token);
        // console.log(111);
        // console.log({
        //   id: Cookies.get("id"),
        //   token: Cookies.get("token"),
        // });
        UploadCookie({
          id: Cookies.get("id"),
          token: Cookies.get("token"),
        }).then((res) => {
          if (res.data.code == 200) {
            console.log(res.data);
            this.$store.commit("increment", {
              isl: true,
              id: Cookies.get("id"),
              state: res.data.state,
            });
            // console.log(1111);
            this.$router.push("/manger");
          }
        });
      } else {
        this.$message.info("登录过期！");
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        Login({ email: values.userName, password: values.password }).then(
          (res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$store.commit("increment", {
                isl: true,
                id: res.data.id,
                state: res.data.state,
              });
              Cookies.set("id", res.data.id, { expires: 7, path: "" });
              Cookies.set("token", res.data.token, { expires: 7, path: "" });
              this.$router.push("/manger");
            } else {
              this.$message.info("密码或用户错误");
            }
          }
        );
        if (!err) {
          //   console.log("Received values of form: ", values);
          //   this.$router.push("/manger");
        }
      });
    },
  },
};
</script>
<style>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
.login-box {
  width: 500px;
  height: 500px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 50px 50px;
}
.body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #69ff97 10%, #00e4ff 100%);
}
</style>